﻿@page "/docs/extensions/snackbar"

<Seo Canonical="/docs/extensions/snackbar" Title="Blazorise Snackbar component" Description="Learn to use and work with the Blazorise Snackbar component, to provide brief messages about app processes. The component is also known as a toast." />

<DocsPageTitle Path="Extensions/Snackbar">
    Blazorise Snackbar component
</DocsPageTitle>

<DocsPageLead>
    Snackbar provide brief messages about app processes. The component is also known as a toast.
</DocsPageLead>

<DocsPageParagraph>
    The snackbar extension is defined of several different components:
</DocsPageParagraph>

<UnorderedList>
    <UnorderedListItem>
        <Code Tag>Snackbar</Code> main snackbar component
        <UnorderedList>
            <UnorderedListItem>
                <Code Tag>SnackbarBody</Code> container for the snackbar content
            </UnorderedListItem>
            <UnorderedListItem>
                <Code Tag>SnackbarAction</Code> snackbar action button
            </UnorderedListItem>
        </UnorderedList>
    </UnorderedListItem>
</UnorderedList>

<DocsPageSubtitle>
    Installation
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="NuGet">
        Install extension from NuGet.
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="SnackbarNugetInstallExample"></DocsPageSectionSource>
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Imports">
        In your main <Badge Color="Color.Light">_Imports.razor</Badge> add:
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="SnackbarImportsExample"></DocsPageSectionSource>
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Static files">
        Include CSS link into your <Code>index.html</Code> or <Code>_Layout.cshtml</Code> / <Code>_Host.cshtml</Code> file, depending if you’re using a Blazor WebAssembly or Blazor Server side project.
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="SnackbarResourcesExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Basic example">
        A basic snackbar that aims to reproduce standard snackbar behavior.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <SnackbarExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="SnackbarExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Variant snackbars">
        You can also define variant <Blazorise.Link To="docs/helpers/colors">colors</Blazorise.Link> to override default snackbar style.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <SnackbarVariantExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="SnackbarVariantExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Stacked snackbars">
        When you want to show multiple snackbars stacked on top of each other you can use a wrapper component <Code>SnackbarStack</Code>.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <SnackbarStackedExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="SnackbarStackedExample" />
</DocsPageSection>

<DocsPageSubtitle>
    API
</DocsPageSubtitle>

<Heading Size="HeadingSize.Is3">
    Attributes
</Heading>

<DocsAttributes>
    <DocsAttributesItem Name="Location" Type="SnackbarLocation" Default="Default">
        Defines the snackbar location.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Color" Type="	SnackbarColor" Default="Default">
        Defines the snackbar color.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Visible" Type="bool" Default="false">
        Defines the visibility of snackbar.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Multiline" Type="bool" Default="false">
        Allow snackbar to show multiple lines of text.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Interval" Type="double" Default="5000">
        Defines the interval (in milliseconds) after which the snackbar will be automatically closed.
    </DocsAttributesItem>
    <DocsAttributesItem Name="AnimationDuration" Type="double" Default="200">
        efines the base animation duration in milliseconds.
    </DocsAttributesItem>
    <DocsAttributesItem Name="DelayCloseOnClick" Type="bool" Default="false">
        If clicked on snackbar, a close action will be delayed by increasing the DefaultInterval time (used if no value is provided in the Push method).
    </DocsAttributesItem>
    <DocsAttributesItem Name="DelayCloseOnClickInterval" Type="double?" Default="null">
        Defines the interval(in milliseconds) by which the snackbar will be delayed from closing.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Closed" Type="EventCallback<SnackbarClosedEventArgs>" Default="null">
        Occurs after the snackbar has closed.
    </DocsAttributesItem>
</DocsAttributes>